*{
box-sizing: border-box;
margin: 0;
padding: 0;
/* font-family:'微软雅黑'; */
/* text-transform:uppercase; */
font-family: "Gilroy-Medium";
color: #333;
word-break: break-word;
word-wrap: break-word;
line-height: 1;
}
*::after,*::before{
content: '';
position: absolute;
}
*::-webkit-scrollbar {
width: 4px;
transition: .5s;
background-color: transparent;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
}
*:hover::-webkit-scrollbar{
width: 4px;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
width: 4px;
}
*::-webkit-scrollbar-thumb {
background-color: #0E4D2A;
border: 2px solid #0E4D2A;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
html,body{
width: 100%;
height: 100%;
position:relative;
}
@font-face {
font-family: "Gilroy-Medium";
src: url("Gilroy-Medium.eot"); /* IE9 */
src: url("Gilroy-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("Gilroy-Medium.woff") format("woff"), /* chromeã€firefox */
url("Gilroy-Medium.ttf") format("truetype"), /* chromeã€firefoxã€operaã€Safari, Android, iOS 4.2+ */
url("Gilroy-Medium.svg#Gilroy-Medium") format("svg"); /* iOS 4.1- */
}
body{
overflow-x: hidden;
}
li{
list-style: none;
}
select{
appearance: none;
-webkit-appearance: none;
text-transform: none;
}
input,button{
outline: none;
border: none;
text-transform: none;
}
a,i{
display: block;
text-decoration: none;
font-style: normal;
}
u,s{
font-style: normal;
font-weight: normal;
display: inline-block;
text-decoration: none;
}
b,span,em{
font-style: normal;
display: block;
font-weight: normal;
}
img{
max-width: 100%;
display: block;
}
.el-message__icon{
display: none;
}
.lf{
float: left !important;
}
.rt{
float: right !important;
}
.flo{
float: left;
width: 100%;
}
.clearFloat::after{/* æ¸…é™¤æµ®åŠ¨å½±å“ */
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.clearFloat{
zoom: 1;
clear: both;
}
.ma_rt{
margin-right: 0px !important;
}
.ma_lf{
margin-left: 0px !important;
}
.bac{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.na1{
animation-delay: 0.1s;
}
.na2{
animation-delay: 0.2s;
}
.na3{
animation-delay: 0.3s;
}
.na4{
animation-delay: 0.4s;
}
.na5{
animation-delay: 0.5s;
}
.na6{
animation-delay: 0.6s;
}
.na7{
animation-delay: 0.7s;
}
.na8{
animation-delay: 0.8s;
}
.na10{
animation-delay: 1s;
}
.fle{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.pos{
position: relative;
z-index: 10;
}
.trs_5{
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
}
.trs_8{
transition: .8s;
-webkit-transition: .8s;
-moz-transition: .8s;
-ms-transition: .8s;
-o-transition: .8s;
}
.pc_dis{
display: block;
}
.ph_dis{
display: none;
}
.pad{
padding-left: 1.6rem;
padding-right: 1.6rem;
}
@font-face {
font-family: "JIZIJINGDIANSONGHEIJIAN-SHAN(GEETYPE-SONGHEIGB-FLASH)-2";
src:url("JIZIJINGDIANSONGHEIJIAN-SHAN(GEETYPE-SONGHEIGB-FLASH)-2.ttf") format("opentype");
}
@font-face {
font-family: "ariblk";
src: url("ariblk.eot"); /* IE9 */
src: url("ariblk.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("ariblk.woff") format("woff"), /* chromeã€firefox */
url("ariblk.ttf") format("truetype"), /* chromeã€firefoxã€operaã€Safari, Android, iOS 4.2+ */
url("ariblk.svg#ariblk") format("svg"); /* iOS 4.1- */
}
@keyframes bai {
0%{
width: 0%;
}
100%{
width: 100%;
}
}
@keyframes zy {
0%{
transform: translateX(-.1rem);
-webkit-transform: translateX(-.1rem);
-moz-transform: translateX(-.1rem);
-ms-transform: translateX(-.1rem);
-o-transform: translateX(-.1rem);
}
100%{
transform: translateX(.1rem);
-webkit-transform: translateX(.1rem);
-moz-transform: translateX(.1rem);
-ms-transform: translateX(.1rem);
-o-transform: translateX(.1rem);
}
}
.nav_ss{
position: fixed;
top: -100%;
width: 100%;
height: 100%;
left: 0%;
padding-top: .77rem;
transition: .8s;
-webkit-transition: .8s;
-moz-transition: .8s;
-ms-transition: .8s;
-o-transition: .8s;
background-color: #0E4D2A;
z-index: 99;
}
.nav_ss.on{
top: 0%;
}
.nav_ss>i{
float: right;
width: auto;
cursor: pointer;
}
.nav_ss>div{
width: 9.56rem;
margin: 0 auto;
margin-top: 18%;
}
.nav_ss>div>p{
font-size: .28rem;
color: #fff;
margin-bottom: .63rem;
text-align: center;
}
.nav_ss>div>div{
background-color: #fff;
padding: .22rem .45rem .2rem .5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav_ss>div>div>input{
font-size: .2rem;
color: #161616;
width: 90%;
}
.nav_ss>div>div>input::placeholder{
color: #838383;
}
.nav_ss>div>div>i{
cursor: pointer;
}
.nav{
position: fixed;
z-index: 50;
width: 100%;
transition: .8s;
-webkit-transition: .8s;
-moz-transition: .8s;
-ms-transition: .8s;
-o-transition: .8s;
opacity: 0;
border-bottom: 1px solid #f0f0f0;
}
.nav>span{
height: .48rem;
overflow: hidden;
transition: .5s;
}
.nav>span{
font-size: 16px;
align-items: center;
background: #0E4D2A;
justify-content: flex-end;
overflow: inherit;
}
.nav>span>p{
height: 100%;
align-items: center;
color: #fff;
font-size: .18rem;
font-weight: bold;
margin-right: 0.1rem;
}
.nav>span>p>i{
margin-right: 0.07rem;
}
.nav>span>ul{
height: 100%;
align-items: center;
}
.nav>span>ul>li{
position: relative;
height: 100%;
display: flex;
align-items: center;
padding: 0 0.32rem;
}
.nav>span>ul>li:nth-child(4){
padding: 0;
margin: 0 0.32rem;
}
.nav>span>ul>li::after{
height: 0.17rem;
background: #fff;
width: 1px;
right: 0rem;
}
.ph_menu{
display: none;
}
.nav>span>ul>li:nth-child(1)::after,
.nav>span>ul>li:nth-child(2)::after{
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
}
.nav>span>ul>li:nth-child(4)::after{
right: -0.32rem;
}
.nav>span>ul>li:last-child{
padding-right: 0;
}
.nav>span>ul>li:last-child::after{
display: none;
}
.nav>span>ul>li>u{
display: block;
width: .1rem;
height: .1rem;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(
-45deg) translateY(-0.02rem);
margin-left: 0.1rem;
}
.nav>span>ul>li>a{
color: #fff;
}
.nav>span>ul>li>i{
margin-right: 0.06rem;
}
.nav>span>ul>li>p{
color: #fff;
cursor: pointer;
}
.nav>span>ul>li>ul{
position: absolute;
top: 100%;
z-index: 20;
width: 100%;
transition: .5s;
transform-origin: top;
transform: scaleY(0);
}
.nav>span>ul>li:hover>ul{
transform: scaleY(1);
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
}
.nav>span>ul>li>ul>li{
text-align: center;
padding: 0.1rem 0;
background: #fff;
border-bottom: 1px solid #e1e1e1;
}
.nav>span>ul>li>ul>li:last-child{
border-bottom: none;
}
.nav>span>ul>li>ul>li>a{
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
}
.nav>span>ul>li>ul>li>a:hover{
color: #0E4D2A;
}
.nav.active>span{
height: 0px;
overflow: hidden;
}
.nav>div{
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
/*padding: .2rem 1.6rem .25rem 1.6rem;
*/padding: 0rem 1.6rem 0rem 1.6rem;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
}
.nav.active>div {
padding: .1rem 1.6rem .12rem 1.6rem;
/* padding: 0rem 1.6rem 0rem 1.6rem; */
}
.nav>div>span {
width: 15%;
transition: .8s;
-webkit-transition: .8s;
-moz-transition: .8s;
-ms-transition: .8s;
-o-transition: .8s;
cursor: pointer;
}
.nav.active>div>span {
width: 12%;
}
.nav>div>ul{
width: 80%;
display: flex;
justify-content: flex-end;
}
.nav.active>div>ul>li{
padding: .2rem 0.2rem;
}
.nav>div>ul>li{
margin-right: .4rem;
position: relative;
z-index: 10;
font-size: 16px;
color: #161616;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
cursor: pointer;
padding: 0.45rem 0.2rem;
border-bottom: 3px solid transparent;
}
.nav>div>ul>li:hover{
border-bottom: 3px solid #0E4D2A;
}
.nav>div>ul>li:last-child{
margin-right: 0;
}
.nav>div>ul>li::before{
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
background-color: #0E4D2A;
z-index: -1;
background-image: linear-gradient(to top,#0E4D2A, #fff);
}
.nav>div>ul>li:hover::before{
opacity: 0.2;
}
.nav>div>ul>li::after{
width: 0.04rem;
height: 0.04rem;
top: 47%;
right: -0.3rem;
background-color: #D4D4D4;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.nav>div>ul>li:nth-child(6)::after{
width: 1px;
height: .13rem;
top: 45%;
}
.nav.active>div>ul>li:nth-child(6)::after{
top: 40%;
}
.nav>div>ul>li:last-child::after{
display: none;
}
.nav>div>ul>li.on,
.nav>div>ul>li:hover{
color: #0E4D2A;
}
.nav.on{
opacity: 1;
}
.footer{
padding-top: 0.75rem;
}
.footer>ul{
padding-right: 1.6rem;
}
.footer>span{
width: 29%;
margin: 0 0 .72rem 0;
padding: 0 1.6rem;
}
.footer>span>img{
width: 100%;
}
.footer>div{
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 1.6rem;
padding-bottom: 0.52rem;
border-bottom: 1px solid #E0E0E0;
}
.footer>div>ul{
position: relative;
display: flex;
justify-content: space-between;
width: 62%;
}
.footer>div>ul::after{
right: -1.15rem;
height: 100%;
top: 0;
width: 1px;
background-color: #E0E0E0;
opacity: .73;
}
.footer>div>ul>li{
}
.footer>div>ul>li>a{
font-size: .14rem;
display: block;
line-height: 1;
margin-bottom: 0.25rem;
color: #353535;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
}
.footer>div>ul>li>a:last-child{
margin-bottom: 0;
}
.footer>div>ul>li>a:first-child{
font-size: .16rem;
color: #161616;
line-height: 1;
margin-bottom: 0.38rem;
font-weight: bolder;
font-family: PingFang SC;
}
.footer>div>ul>li>a:hover{
color: #0E4D2A;
}
.footer>div>div{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 24%;
}
.footer>div>div>p{
}
.footer>div>div>p>u{
display: block;
font-size: .2rem;
color: #161616;
text-decoration: none;
margin-bottom: .25rem;
font-weight: bolder;
font-family: PingFang SC;
}
.footer>div>div>p>i{
font-size: .16rem;
display: block;
line-height: 2;
color: #575757;
}
.footer>div>div>ul{
margin-top: 0.3rem;
width: 100%;
}
.footer>div>div>ul>li{
width: 31%;
}
.footer>div>div>ul>li>p{
font-size: .16rem;
text-align: center;
margin-top: 0.2rem;
color: #575757;
}
.footer>div>div>div{
width: 32%;
}
.footer>div>div>div>span{
width: 100%;
}
.footer>div>div>div>p{
font-size: .16rem;
text-align: center;
margin-top: .2rem;
color: #575757;
}
.footer>p{
padding-top:.25rem;
padding-bottom:.23rem;
font-size: .14rem;
background-color: #0E4D2A;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer>p>a{
opacity: 0.5;
color: #fff;
}
.footer>p>i{
opacity: 0.5;
color: #fff;
}
.footer>ul{
width: 100%;
display: flex;
justify-content: flex-end;
padding-top: .2rem;
padding-bottom: .2rem;
}
.footer>ul>li{
position: relative;
margin-left: .13rem;
}
.footer>ul>li img{
transition: .5s;
}
.footer>ul>li img:nth-child(2){
position: absolute;
top: 0%;
left: 0%;
opacity: 0;
}
.footer>ul>li:hover img{
opacity: 0;
}
.footer>ul>li:hover img:last-child{
opacity: 1;
}
.rt_dh{
position: fixed;
top: 0;
right: 0;
z-index: 50;
height: 100%;
width: .72rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.rt_dh>span{
width: 100%;
height: .72rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: #0E4D2A;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
border-radius: 4px 0px 0px 4px;
}
.rt_dh>span:last-child{
margin-top: .02rem;
opacity: 0;
}
.rt_dh.active>span:last-child{
opacity: 1;
}
.rt_dh>span>img{
width: 37%;
}
@media screen and (min-width:1930px) and (max-width:2560px) {
img{
width: 100%;
}
}
@media screen and (max-width:1440px) {
.footer>div>div>p>i,
.footer>div>div>div>p,
.footer>div>ul>li>a {
font-size: 12px;
}
.footer>div>ul>li>a:first-child,
.footer>p,
.footer>div>div>p>u {
font-size: 14px;
}
.nav>span>p,
.nav>span,
.nav>div>ul>li{
font-size: 14px;
}
.nav_ss>div>div>input {
font-size: 16px;
}
}
@media screen and (max-width:1024px) {
.nav_ss>div>p {
font-size: 18px;
}
.footer>div>div {
width: 27%;
}
.footer>div>ul {
width: 65%;
}
.footer>div>ul::after {
right: -0.65rem;
}
.rt_dh>span:last-child {
margin-top: 2px;
}
}
@media screen and (max-width:777px) {
.nav>span>ul>li>ul {
top: 140%;
}
.footer>p{
font-size: 12px;
}
.pc_dis{
display: none;
}
.ph_dis{
display: block;
}
.nav>div>ul{
display: none;
}
.nav>div>span {
width: 25%;
}
.nav.active>div>span {
width: 20%;
}
.nav>span {
height: 30px;
}
.nav>div>u{
transform: translateX(200px);
}
.nav>div>i{
width: 30px;
}
.nav_ss>div {
width: 80%;
margin-top: 60%;
}
.ph_menu {
padding-top: 115px;
overflow: hidden;
position: fixed;
top: -100%;
left: 0%;
width: 100%;
height: 100%;
background: #fff;
z-index: 40;
/* padding-left: 1.6rem; */
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
display: block;
}
.ph_menu.active {
top: 0%;
}
.ph_menu>ul {
padding: 0 1.6rem;
overflow: auto;
height: 95%;
}
.ph_menu>ul>li {
position: relative;
text-align: left;
border-bottom: 1px solid rgba(5, 51, 51, 10%);
position: relative;
}
.ph_menu>ul>li:first-child {
/* margin: 15px 0; */
}
.ph_menu>ul>li>a {
position: relative;
color: #333;
line-height: 3;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
font-weight: bold;
display: block;
width: 100%;
font-size: 15px;
}
.ph_menu>ul>li>ul {
display: flex;
top: 13px;
width: 110%;
flex-wrap: wrap;
margin-bottom: 10px;
}
.ph_menu>ul>li>ul>li {
font-size: 14px;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
width: 100%;
}
.ph_menu>ul>li>ul>li>a {
color: #333;
display: flex;
align-items: center;
}
.ph_menu>ul>li>ul>li>ul{
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.ph_menu>ul>li>ul>li>ul>li{
margin-bottom: 8px;
font-size: 12px;
margin-right: 10px;
}
.ph_menu>ul>li>ul>li>ul>li>a{
}
.ph_menu>ul>li>input {
width: 100%;
padding: .5rem;
border: 1px solid #777777;
font-size: 14px;
outline: none;
}
.ph_menu>ul>li>i {
top: 40%;
position: absolute;
right: 10px;
}
.ph_menu {
padding-top: 100px;
}
.ph_menu>ul>li>i {
top: 40%;
}
.footer>span {
width: 40%;
}
.footer>div {
flex-wrap: wrap;
}
.footer>div>ul::after{
display: none;
}
.footer>div>ul,
.footer>div>div{
width: 100%;
}
.footer>div>div>p>u {
display: block;
font-size: 14px;
}
.footer>div>div {
margin-top: 5%;
}
.footer>div>div>div {
width: 15%;
}
.nav>div {
padding: 0.2rem 1.6rem 0.25rem 1.6rem;
}
.nav.active>div {
padding: 10px 1.6rem;
}
}
@media screen and (max-width:540px) {
.ph_menu>ul>li>i {
top: 30%;
}
.ph_menu {
padding-top: 50px;
}
.nav>div>u {
transform: translateX(75px);
}
.nav>span>ul>li::after {
height: 10px;
}
.nav>span>ul>li>u {
width: 8px;
height: 8px;
transform: rotate(-45deg) translateY(-2px);
margin-left: 5px;
-webkit-transform: rotate(-45deg) translateY(-2px);
-moz-transform: rotate(-45deg) translateY(-2px);
-ms-transform: rotate(-45deg) translateY(-2px);
-o-transform: rotate(-45deg) translateY(-2px);
}
.nav>span>ul>li>ul>li {
text-align: center;
padding: 5px 0;
}
.nav>span {
height: 50px;
font-size: 12px;
}
.nav>span>p {
height: auto;
}
.nav>span>ul {
height: auto;
width: 100%;
}
.nav>div>span {
width: 30%;
}
.nav.active>div>span {
width: 35%;
}
.footer>span {
width: 60%;
margin: 0 auto;
margin-bottom: 15px;
}
.footer>div>ul {
flex-wrap: wrap;
justify-content: flex-start;
}
.footer>div>ul>li {
width: 25%;
margin-bottom: 5px;
}
.footer>div>div>div {
width: 30%;
}
.footer>ul {
padding-top: 10px;
padding-bottom: 10px;
}
.footer>p{
flex-wrap: wrap;
}
.footer>p>a {
margin-bottom: 5px;
}
.footer {
padding-top: 15px;
}
.rt_dh{
width: 40px;
}
.rt_dh>span {
height: 40px;
}
.footer>div>ul>li>a{
display: none;
}
.footer>div>ul>li>a:first-child {
display: block;
}
}